דלג לתוכן הראשי

Update Request

כדי לעדכן מידע ב-DB אנחנו משתמשים בפונקציית put.

נוסיף לטבלת הפוסטים שלנו כפתור ששולח לפעולת העדכון. פעולת עדכון תתבצע בדרך כלל מתוך טופס, הטופס שמשמש להכנסת תוכן חדש יכול לשמש גם לעדכון הפוסט. כל מה שצריך לעשות זה רק להוסיף לתוכן השדות את מה שכבר קיים באובייקט.

השלבים יהיו:

  1. קבלת הפוסט שאותו אנחנו רוצים לערוך.
  2. מילוי השדות בערכים שכבר קיימים.
  3. לאחר שינוי התוכן שמירה של התוכן החדש.
app.component.html
<h3>All Posts</h3>
<table>
    <tr>
        <th>Title</th>
        <th>Content</th>
        <th>Actions</th>
    </tr>

    <tr *ngFor="let post of posts">
        <td>
            {{ post.title }}
        </td>
        <td>
            {{ post.content }}
        </td>
        <td>
            <Button class="btn-delete" (click)="onDeletePost(post.id)">Delete Post</Button>
            <Button class="btn-edit" routerLink="/posts/edit/{{ post.id }}">Edit Post</Button>
        </td>
    </tr>
</table>

בקומפוננטת העריכה נקרא לפונקציה שמגיבה לקליק על עריכת פוסט. הקליק יעביר אותנו לדף העריכה של הפוסט עם ה-id של הפוסט אותו אנחנו עורכים.

  1. נמצא את הפוסט בתוך רשימת הפוסטים עם ערך ה-id שאותו אנחנו מחפשים.
app.component.ts
constructor(private postsService: PostsService){}

post: Post[];
currentPost: Post;
currentPostId: number;

ngOnInit(){
    // find the post to edit
    this.currentPostId = this.activatedRoute.snapshot.paramMap.get('id');
    let currentPost = this.posts.find(post => return post.id === currentPostId);
}

בקובץ ה-HTML יש לנו את אותו הטופס שהיה לנו בהכנסת פוסט חדש. אם משתמשים באותו הטופס ממש אפשר לשנות את הכיתוב על הכפתור דינמית על פי הפעולה שאותה אנחנו עושים.

app.component.html
<h3>New Post</h3>
<form #postsForm="ngForm" ngSubmit="onEditPost(postsForm)">
    <label>Title:</label>
    <input type="text" name="title" ngModel>

    <label>Content:</label>
    <input type="text" name="content" ngModel>

    <input type="submit" value="Save Post">
</form>

אנחנו רוצים גישה לטופס הזה כדי להכניס לתוכו את הערכים. אחרי שיש לנו גישה עם משתנה form נכניס לטופס את הערכים של האובייקט שאותו אנחנו רוצים לערוך.

  1. מילוי ערכי הפוסט בטופס
app.component.ts
constructor(private postsService: PostsService){}

post: Post[];
currentPost: Post;
currentPostId: number;
@ViewChild('postsForm') form: NgForm;

ngOnInit(){
    // find the post to edit
    this.currentPostId = this.activatedRoute.snapshot.paramMap.get('id');
    let currentPost = this.posts.find(post => return post.id === currentPostId);

    // populate the form
    this.form.setValue({
        title: currentPost.title,
        content: currentPost.content
    });
}

נגדיר את פונקציית ה-update ב-service.

posts.service.ts
baseUrl = 'http://localhost:3000'

constructor(private http: HttpClient){}

createPost(post: Post){
    return this.http.post(`${baseUrl}/posts`, post);
}

getPosts(): Observable<Post[]>{
    return this.http.get<Post[]>(`${baseUrl}/posts`);
}

deletePost(id: number){
    return this.http.delete(`${baseUrl}/posts/${id}`);
}

updatePost(id: number, post: Post){
    return this.http.put(`${baseUrl}/posts/${id}`, post);
}
  1. שליחת המידע המתאים לפונקציית ה-update.
app.component.ts
constructor(private postsService: PostsService){}

post: Post[];
currentPost: Post;
currentPostId: number;
@ViewChild('postsForm') form: NgForm;

ngOnInit(){
    // find the post to edit
    this.currentPostId = this.activatedRoute.snapshot.paramMap.get('id');
    this.currentPost = this.posts.find(post => return post.id === currentPostId);

    // populate the form
    this.form.setValue({
        title: currentPost.title,
        content: currentPost.content
    });
}

onEditPost(post: Post){
    this.postsService.updatePost(this.currentPostId, post).subscribe(response => {
        console.log(response);
    });
}
לשים לב

ללא קריאה ל-subscribe לא תהיה קריאה לפונקציית ה-update.